/**
 * Created by Administrator on 15-7-31.
 */
var Theme = RichBase.extend({
	statics : {
		api : "api/topic.php",
		dot : "，",
		tpl : '<li class="themeItem <%=select%>"><span class="checkbox">&#10003;</span><span class="t"><%=theme%></span></li>'
	},
	EVENTS : {
		"click" : {
			".close_btn" : "onCloseBtnClick",
			".btn_cancela" : "onCloseBtnClick",
			".btn_surea" : "onYesBtnClick",
			".createThemeBtn" : "onCreatNewTheme",
			".selectlist li" : "onListItemClick"
		}
	},
	init : function(opt){
		var that = this;
		var container = this.container = opt.container;
		this.listUl = container.find(".selectlist");
		this.resultInp = $("#themeInp");
		this.on("fetchThemeSuccess",function(){
			that.adaptTheme();
		})
		$("#openThemeDialogBtn").on("click",function(e){
			that.show();
		})
	},
	onCloseBtnClick : function(that,e){
		that.hide();
	},
	onListItemClick : function(that,e){
		var tarItem = $(e.currentTarget);
		tarItem.toggleClass("select");
	},
	onYesBtnClick : function(that,e){
		that.selectTheme();
		that.hide();
	},
	//远程fecth主题列表
	fetchThemeList : function(){
		var that = this;
		var api = that.statics.api;
		var listUl = that.listUl;
		var tpl = this.statics.tpl;
		PFT.Ajax({
			url : api,
			type : "get",
			dataType : "json",
			loading : function(){
				var loading = '<li style="width:100%; height:100px; line-height:100px; text-align:center">正在加载主题列表，请稍后...</li>';
				listUl.html(loading);
			},
			removeLoading : function(){ listUl.html("")},
			timeout : function(){console.log("fetch主题列表超时")},
			serverError : function(){ console.log("fetch主题列表服务器出错")}
		},function(res){
			var code = res.code;
			var list = res.collection;
			var html = "";
			if(code==200){
				for(var i in list){
					var theme = list[i];
					if(theme=="激情漂流欢乐谷") theme="冰雪世界";
					if(theme=="欢乐谷") theme = "";
					if(theme) html += that.parseTemplate(tpl,{theme:theme,select:""})
				}
				listUl.html(html);
				setTimeout(function(){
					that.fire("fetchThemeSuccess")
				},10)
			}else{
				console.log("fetch主题列表出错");
			}
		})
	},
	//创建新主题
	onCreatNewTheme : function(that,e){
		var createBtn = $(e.currentTarget);
		var newThemeInp = $("#newThemeInp");
		var theme = newThemeInp.val();
		var isExist = false;
		var tpl = that.statics.tpl;
		if(createBtn.hasClass("loading") || !theme) return false;
		that.listUl.children().each(function(){
			var exTheme = $(this).find(".t").text();
			if(exTheme==theme){
				isExist = true;
				alert("该主题已存在");
				return false;
			}
		})
		if(isExist) return false;
		PFT.Ajax({
			url : that.statics.api,
			type : "post",
			dataType : "json",
			data : { topic:theme},
			loading : function(){ createBtn.text("正在新建..")},
			removeLoading : function(){ createBtn.text("新建")},
			timeout : function(){ console.log("新建主题超时")},
			serverError : function(){ console.log("新建主题服务器出错")}
		},function(res){
			var code = res.code;
			if(code==200){
				newThemeInp.val("");
				that.listUl.append(that.parseTemplate(tpl,{theme:theme,select:"select"}));
			}else{
				alert("新建主题失败，请稍后重试");
			}
		})
	},
	//使resultInp的内容与 themelist item selected保持同步
	adaptTheme : function(){
		var that = this;
		var dot = this.statics.dot;
		var selected = that.resultInp.val();
		var selectedArr = selected ? selected.split(dot) : [];
		var themeItems = that.listUl.children();
		if(!selectedArr.length){
			themeItems.removeClass("select");
			return false;
		}
		themeItems.removeClass("select");
		themeItems.each(function(){
			var tarItem = $(this);
			var tarItem_text = tarItem.find(".t").text();
			for(var i in selectedArr){
				var selected = selectedArr[i];
				if(selected==tarItem_text){
					tarItem.addClass("select")
				}
			}
		})
	},
	//选中弹窗中的某个theme item  resultInp val change
	selectTheme : function(){
		var listUl = this.listUl;
		var result = [];
		var dot = this.statics.dot;
		listUl.children().each(function(){
			var tarItem = $(this);
			if(tarItem.hasClass("select")){
				result.push(tarItem.find(".t").text());
			}
		})
		this.resultInp.val(result.join(dot))
	},
	show : function(){
		Pop.show($("#themePopBox"));
		if(!this.listUl.children().length){
			this.fetchThemeList()
		}else{
			this.adaptTheme();
		}
		$("#newThemeInp").val("");
	},
	hide : function(){
		Pop.hide($("#themePopBox"));
	}
});
